$panel-app-title: (
  'color': getCssVar(color, text, 0),
  'font-size': getCssVar(font-size, header-2),
  'font-wight': getCssVar(font-weight, bold),
);

@include b(panel-app-title) {
  @include set-component-css-var('panel-app-title', $panel-app-title);

  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  @include e(title) {
    font-size: getCssVar('panel-app-title', 'font-size');
    font-weight: bold;
    color: getCssVar('panel-app-title', 'color');
  }

  @include e(logo) {
    padding: 0 getCssVar('spacing', 'base');
    font-size: 40px;
    @include flex(row, center, center);

    img {
      display: inline-block;
      width: 20px;
      height: 20px;
    }
  }

  @include m(hidden_logo) {
    padding-left: getCssVar('spacing', 'base');
  }
}
